<template>
    <div class="friend-groupChat">
        <van-cell-group v-for="(item, index) in groupChatList" :key="index">
            <van-cell center size="large"
                @click="$router.push({ path: '/chat', query: { groupChat_id: item._id } })"
            >
                <template #icon>
                    <van-image round fit="cover" width="3.125rem" height="3.125rem" 
                        :src="item.groupAvatar"
                    />
                </template>
                <template #title>
                    <span style="padding-left: 0.625rem">{{ item.groupName }}</span>
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        computed: {
            ...mapState(['groupChatList']),
        },
    };
</script>

<style lang="less" scoped>

</style>